<template>
  <div class="quotaAgreement">
    <el-form inline label-width="100px" label-position="left">
      <el-row>
        <el-form-item label="客户姓名：">
          <el-input v-model="objForm.khxm" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="证件号码：">
          <el-input v-model="objForm.zjhm" placeholder=""></el-input>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="手机号码：">
          <el-input v-model="objForm.sjhm" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="协议编号：">
          <el-input v-model="objForm.hkrzh" placeholder=""></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="业务品种：">
          <el-select
            v-model="objForm.ywpz"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in ywpzOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态：">
          <el-select
            v-model="objForm.dqzt"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in dqztOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="开始日期：">
          <el-date-picker
            v-model="objForm.ksrq"
            type="datetimerange"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            style="width: 226px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期：">
          <el-date-picker
            v-model="objForm.jsrq"
            type="datetimerange"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            style="width: 226px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="额度金额：">
          <el-input
            v-model="objForm.edje_start"
            style="width: 100px"
          ></el-input>
          <span> — </span>
          <el-input v-model="objForm.edje_end" style="width: 100px"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item style="padding-top: 20px; float: left; width: 76px">
          <el-button type="primary" @click="queryOverPayment" size="large"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item
          style="
            padding-top: 20px;
            width: 76px;
            float: left;
            padding-right: 120px;
          "
        >
          <el-button type="primary" @click="restAll" size="large"
            >重置</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-table
      :data="quotaAgreementQueryData"
      title="额度协议查询列表"
      border
      height="300"
      stripe="true"
      style="width: 100%"
    >
      <el-table-column type="selection" />
      <el-table-column
        prop="xybh"
        label="协议编号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="khmc"
        label="客户名称"
        width="120"
        align="center"
      />
      <el-table-column
        prop="zjhm"
        label="证件号码"
        width="120"
        align="center"
      />
      <el-table-column
        prop="sjhm"
        label="手机号码"
        width="120"
        align="center"
      />
      <el-table-column
        prop="dqzt"
        label="当前状态"
        width="120"
        align="center"
      />
      <el-table-column
        prop="dkzt"
        label="贷款状态"
        width="120"
        align="center"
      />
      <el-table-column
        prop="edje"
        label="额度金额"
        width="120"
        align="center"
      />
      <el-table-column
        prop="syed"
        label="剩余额度"
        width="120"
        align="center"
      />
      <el-table-column
        prop="dqyqze"
        label="当前逾期总额"
        width="120"
        align="center"
      />
      <el-table-column
        prop="dqzdyqts"
        label="当前最大逾期天数"
        width="120"
        align="center"
      />
      <el-table-column
        prop="ksrq"
        label="开始日期"
        width="120"
        align="center"
      />
      <el-table-column
        prop="jsrq"
        label="结束日期"
        width="120"
        align="center"
      />
      <el-table-column label="操作" width="220" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleFreeze(scope.$index, scope.row)"
            >冻结</el-button
          >
          <el-button size="mini" @click="handleThaw(scope.$index, scope.row)"
            >解冻</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleLogoff(scope.$index, scope.row)"
            >注销</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="float: right"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "quotaAgreement",
  props: ["data"],
  data() {
    return {
      //quotaAgreementQueryData:[{'khmc':'11111'}],
      quotaAgreementQueryData: [],
      dqztOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶 ",
        },
      ],
      ywpzOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶 ",
        },
      ],
      objForm: {},
      total: 0,
      currentPage: 1,
    };
  },

  created() {
    console.log("额度协议管理模块初始化：");
    var zjhm = sessionStorage.getItem("idNo"); //身份证号
    this.queryInfo(zjhm);
  },

  watch: {
    $route: function (to, from) {
      console.log("监听【额度协议管理模块】route变化");
      this.$destroy();
    },
  },

  methods: {
    queryInfo(params) {
      console.log("params=", params);
    },

    selectable(row, index) {
      console.log("select:");
      console.log(row);
      console.log(index);
    },

    //冻结
    handleFreeze() {
      //弹窗提醒
      this.$confirm("确定要进行冻结操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用核心系统接口
          console.log("调用核心系统接口");
          this.$message({
            type: "success",
            message: "冻结成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消冻结操作",
          });
        });
    },

    //解冻
    handleThaw() {
      //弹窗提醒
      this.$confirm("确定要进行解冻操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用核心系统接口
          console.log("调用核心系统接口");
          this.$message({
            type: "success",
            message: "解冻成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解冻操作",
          });
        });
    },

    //注销
    handleLogoff() {
      //弹窗提醒
      this.$confirm("确定要进行注销操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用核心系统接口
          console.log("调用核心系统接口");
          this.$message({
            type: "success",
            message: "注销成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销操作",
          });
        });
    },

    //切换当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //切换每页条数
    handleSizeChange_Claim1(val) {},

    restAll() {
      console.log("重置【额度协议管理】页面数据");
    },
  },
};
</script>

<style scoped>
.quotaAgreement .el-form-item {
  width: 282.5px;
}
</style>
